<template>
	<view class="comment-section">
		<!-- 评论头部 -->
		<view class="comment-header">
			<view class="comment-count" @click="toggleComments">
				{{  totalCommentsCount }}条评论
			</view>
		</view>
		<!-- 使用过渡动画 -->
		<transition name="slide-fade">
			<view class="comments-list" v-if="showComments">
				<!-- 渲染评论树 -->
				<comment-tree :comments="comments" :like-icon-src="likeIconSrc" :liked-icon-src="likedIconSrc" @add-reply="addReply" @toggle-like="toggleLike"></comment-tree>
			</view>
		</transition>
		<!-- 当没有评论且显示评论区域时显示占位符 -->
		<view v-if="!comments.length && showComments" class="no-comments-placeholder">
			期待你的评论，发条评论参与讨论
		</view>
		<!-- 添加评论的输入框 -->
		<view class="add-comment" v-if="showComments">
			<input type="text" v-model="newComment.content" placeholder="写评论..." />
			<button :class="submitButtonClass" @click="submitComment">{{ submitButtonText }}</button>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		ref,
		onMounted,
		computed
	} from 'vue';
	import CommentTree from './CommentTree.vue'; // 引入评论树组件
	import {
		getComments, // 获取评论列表
		createComment, // 创建评论
		createReply, // 创建回复
		createLikes, // 创建点赞
		deleteLikes,// 删除点赞
		userId,
	} from '@/pages/analyse/api/comment.js'; // 引入评论相关的 API 方法

	import {
		useRoute
	} from 'vue-router';

	// 初始化 props
	const props = defineProps({
		comments: {
		    type: Array,
		    required: true
		  },
		articleId: { // 文章ID，用于获取特定文章的评论
			type: String,
			required: true
		},
		initialComments: { // 初始化评论数据
			type: Array,
			default: () => []
		},
		likeIconSrc: { // 点赞图标源地址
			type: String,
			default: '../../../static/未点赞.svg'
		},
		likedIconSrc: { // 已点赞图标源地址
			type: String,
			default: '../../../static/已点赞.svg'
		}
	});

	const initialComments = props.initialComments; // 初始化评论数组


	const comments = ref(props.initialComments || []); // 初始化评论数据
	const articleId = ref(''); // 初始化文章ID为字符串

	// 使用 Vue Router 获取路由参数
	const route = useRoute();
	if (route.query.id) {
		articleId.value = route.query.id;
	}

	const showComments = ref(false); // 控制评论列表是否显示

	const newComment = ref({ // 新评论对象
		id: '',
		content: '',
		articleId: articleId.value,
		userId: userId,
		userName: '',
		userPhoto: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.y6rdSCGpxbfeb8Rd1CpSuwAAAA?w=203&h=203&c=7&r=0&o=5&pid=1.7',
		createdAt: '',
		isTopLevel: true,
		parentId: null,
		level: 1,
		likes:0,
		replies: []
	});

	// 组件挂载完成后初始化评论列表
	onMounted(() => {
		// 初始化评论列表
		fetchComments();
	
	});

	const submitButtonClass = computed(() => newComment.value.content.trim() ? 'submit-button active' :
	'submit-button'); // 计算提交按钮样式
	const submitButtonText = ref('发表评论'); // 提交按钮文本

	async function fetchComments() { // 获取评论
		
			// // 获取路由上面的文章id
			// const route = useRoute();
			// if (route.query.id) {
			// 	articleId.value = route.query.id;
			// }
		      const res = await getComments(articleId.value); // 请求评论数据
		      comments.value = res.data; // 更新评论数据
		      console.log(comments.value);
		    
		  }
	// 提交评论的方法
	async function submitComment() {
	    if (!newComment.value.content) { // 检查评论内容是否为空
	        alert('评论内容不能为空');
	        return;
	    }
	
	    try {
	        // 根据是否有parentId判断是创建评论还是回复
	        let response = await (newComment.value.parentId ? createReply(newComment.value) : createComment(newComment.value));
	        
	        // 清空评论输入框
	        newComment.value.content = '';
	        
	        // 重置提交按钮文本
	        submitButtonText.value = '发表评论';
	        
	        // 重新加载评论以反映新的变化
	        await fetchComments();
	    } catch (error) {
	        console.error('发生错误:', error); // 输出错误信息
	    }
	}
	console.log(comments.value);

	const handleError = (error) => {
	    if (error.response && error.response.status === 401) {
	        alert('您没有权限执行此操作，请登录。');
	    } else {
	        alert('操作失败，请检查您的网络连接或稍后重试。');
	    }
	    console.error('发生错误:', error);
	};

	// 切换点赞状态
	const toggleLike = async (comment) => {
		if (comment.isLiked) { // 如果已点赞，则取消点赞
			await deleteLikes(comment.id,userId);
		} else { // 否则创建点赞
			await createLikes(comment.id,userId);
		}

		comment.isLiked = !comment.isLiked; // 切换点赞状态
		if (comment.isLiked) { // 如果点赞了，则增加点赞数
			comment.likes++;
		} else { // 否则减少点赞数
			comment.likes--;
		}
		if (comment.likes > 99) { // 超过99点赞显示">99"
			comment.likes = '>99';
		}
	};

	//回复
	async function addReply(parentComment, replyContent) {
	    try {
	        // 创建新的回复对象
	        const newReply = {
	            userId: userId,
	            content: replyContent,
	            parentId: parentComment.id,
	            replies: []
	        };
	
	        // 模拟API调用创建回复
	        const res = await createReply(newReply);
	
	        // 获取服务器返回的新回复数据
	        const serverReply = res.data;
	
	        // 更新评论数据
	        comments.value = updateLocalComments(parentComment.id, serverReply);
	
	        // 成功后重新加载评论列表
	        await fetchComments();
	
	        console.log(comments.value);
	    } catch (error) {
	        console.error('添加失败:', error);
	    }
	};

	const updateLocalData = (dataList, id, updater) => { // 更新本地数据
		return dataList.map(item => { // 遍历数据列表
			if (item.id === id) { // 如果找到对应ID
				return updater(item); // 应用更新器函数
			}
			return item; // 否则返回原对象
		});
	};

	// 更新本地评论数据
	const updateLocalComments = (parentId, newReply) => {
	    return comments.value.map(comment => {
	        // 如果找到了父评论，则在其子回复数组中添加新的回复
	        if (comment.id === parentId) {
	            return {
	                ...comment,
	                replies: [...(comment.replies || []), newReply]
	            };
	        }
	        return comment;
	    });
	};

	const toggleComments = () => { // 切换评论列表显示状态
		showComments.value = !showComments.value;
		console.log(showComments.value);
	};
	
	
	const totalCommentsCount = computed(() => {
	    let count = 0;
	    comments.value.forEach(comment => {
	        count++; // 计算顶级评论
	        count += countReplies(comment.replies); // 递归计算回复数量
	    });
	    return count;
	});
	
	function countReplies(replies) {
	    let count = replies.length;
	    replies.forEach(reply => {
	        count += countReplies(reply.replies || []); // 如果有更多层级的回复，继续递归
	    });
	    return count;
	}
</script>


<style scoped>
/* 评论区的整体样式 */
.comment-section {
	padding: 10rpx; /* 内边距 */
	background-color: #f5f5f5; /* 背景颜色 */
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1); /* 阴影效果 */
	max-width: 600rpx; /* 最大宽度 */
	margin: auto; /* 居中对齐 */
	border-radius: 8rpx; /* 圆角 */
}

/* 评论头部样式 */
.comment-header {
	display: flex; /* 弹性布局 */
	align-items: center; /* 垂直居中对齐 */
	justify-content: space-between; /* 水平方向两端对齐 */
	padding: 10rpx; /* 内边距 */
	background-color: #fff; /* 背景颜色 */
	border-bottom: 1rpx solid #ebebeb; /* 底部边框 */
	border-radius: 8rpx 8rpx 0 0; /* 圆角 */
}

/* 评论数量文本样式 */
.comment-count {
	cursor: pointer; /* 鼠标悬停指针变化 */
	font-size: 32rpx; /* 字体大小 */
	color: #333; /* 文字颜色 */
	transition: color 0.3s; /* 文字颜色过渡效果 */
}

/* 评论数量文本悬停状态样式 */
.comment-count:hover {
	color: #007BFF; /* 文字颜色 */
}

/* 评论列表样式 */
.comments-list {
	margin-top: 20rpx; /* 外边距 */
	max-height: calc(62vh - 100rpx); /* 最大高度 */
	overflow-y: auto; /* 溢出滚动 */
	width: 100%; /* 宽度 */
	display: block; /* 显示模式 */
	box-sizing: border-box; /* 盒模型 */
}

/* 单个评论项样式 */
.comment-item {
	display: flex; /* 弹性布局 */
	padding: 20rpx; /* 内边距 */
	background-color: #fff; /* 背景颜色 */
	border-radius: 8rpx; /* 圆角 */
	margin-bottom: 20rpx; /* 外边距 */
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05); /* 阴影效果 */
	transition: transform 0.2s, box-shadow 0.2s; /* 变换和阴影过渡效果 */
}

/* 单个评论项悬停状态样式 */
.comment-item:hover {
	transform: translateY(-4rpx); /* 向上移动 */
	box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 用户头像样式 */
.comment-avatar image {
	width: 80rpx; /* 宽度 */
	height: 80rpx; /* 高度 */
	border-radius: 50%; /* 圆形 */
	object-fit: cover; /* 图片填充方式 */
}

/* 用户名样式 */
.comment-username {
	font-weight: bold; /* 字体加粗 */
	font-size: 32rpx; /* 字体大小 */
	color: #333; /* 文字颜色 */
}

/* 发表时间样式 */
.comment-time {
	color: #999; /* 文字颜色 */
	font-size: 28rpx; /* 字体大小 */
}

/* 评论内容样式 */
.comment-content {
	margin-top: 10rpx; /* 外边距 */
	font-size: 32rpx; /* 字体大小 */
	line-height: 1.5; /* 行高 */
	color: #444; /* 文字颜色 */
}

/* 评论操作（如点赞）样式 */
.comment-actions {
	display: flex; /* 弹性布局 */
	align-items: center; /* 垂直居中对齐 */
	margin-top: 10rpx; /* 外边距 */
}

/* 单个操作（如点赞）样式 */
.comment-action {
	display: flex; /* 弹性布局 */
	align-items: center; /* 垂直居中对齐 */
	margin-right: 20rpx; /* 外边距 */
	cursor: pointer; /* 鼠标悬停指针变化 */
	color: #6c757d; /* 文字颜色 */
	transition: color 0.3s; /* 文字颜色过渡效果 */
}

/* 单个操作悬停状态样式 */
.comment-action:hover {
	color: #007BFF; /* 文字颜色 */
}

/* 操作图标样式 */
.comment-action image {
	width: 40rpx; /* 宽度 */
	height: 40rpx; /* 高度 */
	margin-right: 10rpx; /* 外边距 */
}

/* 回复表单和添加评论输入框样式 */
.reply-form,
.add-comment {
	display: flex; /* 弹性布局 */
	align-items: center; /* 垂直居中对齐 */
	margin-top: 10rpx; /* 外边距 */
	justify-content: space-between; /* 水平方向两端对齐 */
}

/* 回复表单和添加评论输入框样式 */
.reply-form input,
.add-comment input {
	flex-grow: 1; /* 弹性增长 */
	margin-right: 10rpx; /* 外边距 */
	font-size: 32rpx; /* 字体大小 */
	padding: 10rpx; /* 内边距 */
	border: 1rpx solid #ccc; /* 边框 */
	border-radius: 4rpx; /* 圆角 */
}

/* 子评论区域样式 */
.replies {
	margin-top: 10rpx; /* 外边距 */
	margin-left: 100rpx; /* 左侧外边距 */
}

/* 子评论项样式 */
.reply-item {
	display: flex; /* 弹性布局 */
	align-items: baseline; /* 基线对齐 */
	margin-left: 10rpx; /* 左侧外边距 */
}

/* 子评论用户名样式 */
.reply-username {
	font-weight: bold; /* 字体加粗 */
	color: #333; /* 文字颜色 */
	font-size: 32rpx; /* 字体大小 */
}

/* 子评论内容样式 */
.reply-content {
	margin-left: 5rpx; /* 左侧外边距 */
	font-size: 32rpx; /* 字体大小 */
	color: #444; /* 文字颜色 */
}

/* 提交按钮样式 */
.submit-button {
	background-color: transparent; /* 透明背景 */
	color: #333; /* 文字颜色 */
	border: none; /* 无边框 */
	outline: none; /* 无轮廓 */
	cursor: pointer; /* 鼠标悬停指针变化 */
	padding: 10rpx 20rpx; /* 内边距 */
	font-size: 32rpx; /* 字体大小 */
	border-radius: 4rpx; /* 圆角 */
	transition: background-color 0.3s, color 0.3s; /* 背景颜色和文字颜色过渡效果 */
}

/* 提交按钮激活状态样式 */
.submit-button.active {
	background-color: #007BFF; /* 背景颜色 */
	color: #fff; /* 文字颜色 */
}

/* 移动端样式调整 */
@media screen and (max-width: 768px) {
	.comment-section {
		padding: 10rpx; /* 内边距 */
		max-width: 100%; /* 最大宽度 */
	}

	.comment-header {
		padding: 10rpx; /* 内边距 */
	}

	.comment-count {
		font-size: 28rpx; /* 字体大小 */
	}

	.comment-item {
		padding: 10rpx; /* 内边距 */
	}

	.comment-avatar image {
		width: 60rpx; /* 宽度 */
		height: 60rpx; /* 高度 */
	}

	.comment-username {
		font-size: 28rpx; /* 字体大小 */
	}

	.comment-time {
		font-size: 24rpx; /* 字体大小 */
	}

	.comment-content {
		font-size: 28rpx; /* 字体大小 */
	}

	.comment-action {
		margin-right: 10rpx; /* 外边距 */
	}

	.comment-action image {
		width: 30rpx; /* 宽度 */
		height: 30rpx; /* 高度 */
	}

	.reply-form input,
	.add-comment input {
		padding: 5rpx; /* 内边距 */
	}

	.replies {
		margin-left: 60rpx; /* 左侧外边距 */
	}

	.reply-item {
		margin-left: 5rpx; /* 左侧外边距 */
	}

	.reply-username {
		font-size: 28rpx; /* 字体大小 */
	}

	.reply-content {
		font-size: 28rpx; /* 字体大小 */
	}

	.submit-button {
		padding: 5rpx 10rpx; /* 内边距 */
		font-size: 28rpx; /* 字体大小 */
	}
}
</style>